@*
* Copyright 2016 LinkedIn Corp.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*@

@(results: Html)

@*
* The layout of the compare page.
*
* This includes the search panel at the left which takes two flow execution urls and
* the comparison results will be displayedat the center.
*
* @param results The search results rendered according to compareResults
*@

@main("Dr. Elephant - Compare", "compare") {
  @tags.column(3) {
    @tags.panel(){ Compare } {
      <form id="compare-form" role="form" method="get" action="@routes.Application.compare()">
        <div class="form-group">
          <label for="form-flow-id-1">Flow Execution URL/ID 1</label>
          <input type="text" class="form-control" id="form-flow-id-1" name="flow-exec-id1" placeholder="Flow Exec URL/ID 1">
        </div>

        <div class="form-group">
          <label for="form-flow-id-2">Flow Execution URL/ID 2</label>
          <input type="text" class="form-control" id="form-flow-id-2" name="flow-exec-id2" placeholder="Flow Exec URL/ID 2">
        </div>

        <button type="submit" class="btn btn-default">Compare</button>
      </form>
    }
  }

  @tags.column(9) {
    @results
  }
}
